<template>
  <div class="home_page board">
    <div class="btn_group" v-if="!isParticipatingUnit">
      <!-- 工作台 -->
      <div v-show="item.isShow" class="workBench-button-box" :class="{'activeBlue':activeKey === 'work_bench'}" :style="{ 'justify-content': 'center' ,'padding':hasBord?'':'10px' }" v-for="(item, index) in routerListWork" :key="item.key || index">
        <div class="workBench-button" @click="goRouter(item.key)">
          <el-badge :max="99" :value="waitTotal > 0 ? waitTotal : ''">
            <div class="flex-row-center">
              <i :class="`iconfont icon-gongzuotai3`" :style="{
              color: '#005FFF', fontSize: '20px'
            }"></i>
              <span class="btn_text gzt-btn-text">{{ item.name }}</span>
            </div>
          </el-badge>
        </div>
      </div>
      <!-- 驾驶舱 -->
      <div v-show="item.isShow" class="workBench-button-box" :class="{'activeYellow':activeKey === 'cockpit'}" :style="{ 'justify-content': 'center','padding':hasBord?'':'10px' }" v-for="(item, index) in routerListCockpit" :key="item.key || index">
        <div class="workBench-button" @click="goRouter(item.key)">
          <div class="flex-row-center">
            <img class="bckimg" src="@/assets/images/homePage/cockpit.png" />
            <!-- <i :class="`iconfont ${item.icon}`" :style="{color:item.color, fontSize: '18px'}"></i> -->
            <span class="btn_text">{{ item.name }}</span>
          </div>
        </div>
      </div>
      <!-- 单项目入口 -->
      <div class="workBench-button-box" :style="{ 'justify-content': 'center','padding':hasBord?'':'10px','margin-right':hasBord?'10px':'0px' }" :class="{'activeGreen1':activeKey === 'fangZao'}" v-for="(item, index) in routerListFangZao" :key="item.key || index" v-show="item.isShow">
        <div class="workBench-button" @click="thirdLoginForFz(item)">
          <div class="flex-row-center">
            <img src="@/assets/images/homePage/bar.png" alt="back" class="bckimg">
            <span class="btn_text">{{ item.name }}</span>
          </div>
        </div>
      </div>

      <!-- 工程概况、进度看板、造价看板、质安看板 -->
      <div class="btn_left" v-show="hasBord">
        <div v-show="item.isShow" class="btn_container" v-for="(item, index) in routerList" :key="item.key || index" @click="goRouter(item.key)" @mouseenter="hoverIndex = item.key" @mouseleave="hoverIndex = 'null'" :class="activeKey==item.key||hoverIndex==item.key?item.active:''">
          <img class="bckimg" :src="item.src" />
          <span class="btn_text">{{ item.name }}</span>
        </div>
      </div>
    </div>

    <div class="content">
      <work-bench v-if="activeKey === 'work_bench'" />
      <!-- <work-bench-Participating v-if="activeKey === 'work_bench_Participating'" /> -->
      <!-- <cockpit v-if="activeKey === 'cockpit'" /> -->
      <entreace v-if="activeKey==='fangZao'"></entreace>
      <invest-analysis v-else-if="activeKey === 'invest_analysis'" />
      <safety v-else-if="activeKey === 'safety_analysis'" />
      <progress-analysis v-else-if="activeKey === 'progress_analysis'" />
      <meter-analysis v-else-if="activeKey === 'meter_analysis'" />
      <!-- <quality-analysis v-else-if="activeKey === 'quality_analysis'" /> -->
      <div v-else-if="activeKey == ''" class="empty-content">
        <img src="@/assets/images/zwfa.png" alt="正在规划中" style="height: 50%" />
        <div class="tipTitle">正在规划中</div>
      </div>
    </div>
  </div>
</template>
<script>
import store from '@/store'
import projectSectionInfo from '@/api/buss/common'
import todo from '@/api/wf/todo'
import msgUtil from '@/utils/msgUtil'
import WorkBench from './components/workBench.vue'
// import workBenchParticipating from './components/work_bench_Participating.vue'
import cockpit from './components/cockpit.vue'
import InvestAnalysis from './components/investAnalysis.vue'
import entreace from './components/entrance.vue'
import Safety from './components/safety.vue'
import ProgressAnalysis from './components/progress.vue'
import meterAnalysis from './components/meterAnalysis'
// import qualityAnalysis from './components/qualityAnalysis.vue'
// import thirdLogin from '@/api/system/thirdLogin'

const colors = [
  '#005FFF',
  '#EDA51D',
  '#00D6A1',
  '#11B3D9',
  '#5E50D8',
  '#00ABD5'
]
const bgColors = [
  // 'rgba(0, 95, 255, 0.13)',
  // 'rgba(253, 191, 84, 0.13)',
  // 'rgba(105, 231, 199, 0.08)',
  // 'rgba(17, 179, 217, 0.11)',
  // 'rgba(91, 109, 242, 0.1)',
  // 'rgba(0, 95, 255, 0.04)',
  '#F4F8FF',
  '#FFFBF4',
  '#F2FFFC',
  '#EFFCFF',
  '#F5F6FF',
  '#F2FDFF'
]
export default {
  name: 'homePage',
  components: {
    WorkBench,
    cockpit,
    InvestAnalysis,
    entreace,
    meterAnalysis,
    // qualityAnalysis,
    Safety,
    ProgressAnalysis,
    // workBenchParticipating
  },
  watch: {
    chooseProjectId: {
      immediate: false,
      handler: function(val) {
        console.log("chooseProjectId=", val)
        this.$store.dispatch('people/update_projectId', val)
      }
    },
    activeKey: {
      immediate: false,
      handler: function(val) {
        console.log(val)
        if (val != 'work_bench') {
          this.getWaitDo()
        } else {
          this.waitTotal = ''
        }
      }
    }
  },
  data() {
    return {
      isParticipatingUnit: false,
      projectType: '1',
      waitTotal: 0,
      hasBord: true,
      leftList: [],
      rightList: [],
      projectTree: [],
      chooseProjectId: null,
      permission: {
        show0: ['100', '1000017:show0'],
        show1: ['100', '1000017:show1'],
        show2: ['100', '1000017:show2'],
        show3: ['100', '1000017:show3'],
        show4: ['100', '1000017:show4'],
        show5: ['100', '1000017:show5'],
        show6: ['100', '1000017:show6'],
        // show7: ['100', '1000017:show7'],
      },
      hoverIndex: 'null',
      activeKey: 'work_bench',
      routerList: [
        {
          name: '工程概况',
          key: 'invest_analysis',
          active: 'acitvepurple',
          color: colors[1],
          icon: 'InvestmentManagement',
          bg: bgColors[1],
          src: require('@/assets/images/homePage/project.png'),
          isShow: true
        },
        {
          name: '进度看板',
          key: 'progress_analysis',
          active: 'activeGreen',
          color: colors[5],
          icon: 'jindutiao_fuzhi',
          bg: bgColors[5],
          src: require('@/assets/images/homePage/plan.png'),
          isShow: true
        },
        {
          name: '造价看板',
          key: 'meter_analysis',
          active: 'activeBlue',
          color: colors[2],
          icon: 'jindujiliangfenxi',
          bg: bgColors[2],
          src: require('@/assets/images/homePage/cost.png'),
          isShow: true
        },
        {
          name: '质安看板',
          key: 'safety_analysis',
          active: 'activeYellow1',
          color: colors[4],
          icon: 'anquanfenxi',
          bg: bgColors[4],
          isShow: true,
          src: require('@/assets/images/homePage/security.png'),
        }
      ],
      routerListWork: [
        { name: '工作台', key: 'work_bench', color: colors[0], icon: 'gongzuotai3', bg: bgColors[0], isShow: true }
      ],
      routerListCockpit: [
        { name: '驾驶舱', key: 'cockpit', color: colors[1], icon: 'icon-p1', bg: bgColors[0], isShow: true }
      ],
      routerListFangZao: [
        { name: '项目入口', key: 'fangZao', color: colors[0], bg: bgColors[0], isShow: true }
      ]
    }
  },
  created() {
    const roles = this.$store.getters && this.$store.getters.roles
    const authCodes = this.$store.getters && this.$store.getters.authCodes
    var permissions = Object.entries(this.permission)
    let arr = JSON.parse(JSON.stringify(this.routerList))
    permissions.forEach((item, index) => {
      const permissionRoles = item[1]
      //角色过滤，如admin
      var hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      })
      if (!hasPermission) {
        //菜单资源过滤
        hasPermission = authCodes.some(authCode => {
          return permissionRoles.includes(authCode)
        })
      }
      if (!hasPermission) {
        console.log("hasPermission=", hasPermission)
        console.log(index, '不出来的菜单index')
        if (index == 0) {
          this.routerListWork[0].isShow = false
        } else if (index == 5) {
          this.routerListCockpit[0].isShow = false
        } else if (index == 6) {
          this.routerListFangZao[0].isShow = false
        } else {
          this.routerList[index - 1].isShow = false
        }
      }
      this.$set(this, 'routerList', arr)
      console.log(this.routerList, 'xxxxxxxxxxxx')
      if (sessionStorage.getItem('projectsArr')) {
        if (JSON.parse(sessionStorage.getItem('projectsArr').length > 0)) {
          this.routerListCockpit[0].isShow = true
        } else {
          this.routerListCockpit[0].isShow = false
        }
      } else {

      }
    })
  },
  mounted() {
    console.log("index2")
    // this.activeKey = 'work_bench'
    // let sysUser = JSON.parse(localStorage.getItem('sysUser'))
    // let sysCompany = JSON.parse(localStorage.getItem('sysCompany'))
    // let arr = ['0202c0a6affe420ab8b67c48012c8bfe', '40284081785855bd017859172a91010f', '4028818f7ef7100d017ef72816f20032', '7842bce93fbc4d90911d23468900dcd1', 'c0f5a988c2bc427c875bf1ccc9a5c846', 'dd586947e1204b2e9157967b7528a7a9', 'ff8080817ef723e2017ef732aa2e0003']
    // let companyType = (JSON.parse(sysCompany.companyType))[0]
    // if (arr.includes(companyType)) {
    //   //模拟交建单位
    //   this.isParticipatingUnit = true
    //   this.activeKey = 'work_bench'
    // } else {
    //   this.chooseProjectId = ''
    //   this.getProjectList()
    //   this.getWaitDo()
    //   console.log(this.routerList, '123123')
    //   let hasBord = false
    //   this.routerList.forEach((item, index) => {
    //     console.log(item.isShow)
    //     if (item.isShow) {
    //       hasBord = true
    //     }
    //   })
    //   this.$set(this, 'hasBord', hasBord)
    //   for (let i in this.routerListWork) {
    //     let item = this.routerListWork[i]
    //     if (item.isShow) {
    //       this.activeKey = item.key
    //       return
    //     }
    //   }
    //   for (let i in this.routerList) {
    //     let item = this.routerList[i]
    //     if (item.isShow) {
    //       this.activeKey = item.key
    //       return
    //     }
    //   }
    //   for (let i in this.routerListCockpit) {
    //     let item = this.routerListCockpit[i]
    //     if (item.isShow) {
    //       this.activeKey = item.key
    //       return
    //     }
    //   }
    //   for (let i in this.routerListFangZao) {
    //     let item = this.routerListFangZao[i]
    //     if (item.isShow) {
    //       this.activeKey = item.key
    //       return
    //     }
    //   }
    //   this.$set(this, 'leftList', [])
    // }
  },
  methods: {
    thirdLoginForFz(item) {
      this.goRouter(item.key)
      // thirdLogin.getToken().then(res => {
      //   if (res.code === 200) {
      //     var token = res.data;
      //     window.open('https://www.nyfzgs.cn/#/?token=' + token)
      //   } else {
      //     msgUtil.error2(res.data.message)
      //   }
      // }).catch(() => {
      //   msgUtil.error2("获取方枣Token失败")
      // })
    },
    getWaitDo() {
      this.waitTotal = 0
      const userId = store.getters.user.id
      todo.getList({ pageNo: 0, pageSize: 99, userId: userId }).then(({ code, data }) => {
        if (code === 200) {
          this.waitTotal = data.length
        } else {
          msgUtil.error2(data.message)
        }
      }).catch(() => {
        msgUtil.error2('获取待办事项失败!')
      })
    },
    getProjectList() {
      const company = localStorage.getItem('sysCompany')
      const companyType = (company && company != 'null') ? JSON.parse(company).companyType : '';
      this.projectTree = []
      projectSectionInfo.getProjectSectionInfoTree().then(res => {
        if (res.code === 200) {
          var data = res.data
          if (data.length > 0) {
            data.forEach((item, index) => {
              this.projectTree = this.projectTree.concat(item.children)
              if (item.companyType.indexOf('80beb78c7b374b69b183adbb233ddfd5') >= 0 && companyType.indexOf('80beb78c7b374b69b183adbb233ddfd5') >= 0) {
                if (this.projectTree.length == 1) {
                  this.chooseProjectId = this.projectTree[0].id
                }
              }
            })
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2('获取项目标段树失败')
      })
    },
    goRouter(key) {
      if (key === 'cockpit') {
        const rData = this.$router.resolve({ path: '/cockpitDemo' })
        window.open(rData.href, '_blank')
      } else {
        this.activeKey = key
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.home_page {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.title {
  flex-shrink: 0;
  align-items: center;
}

.bt20 {
  margin-bottom: 24px;
}

.btn_group {
  width: 100%;
  height: 60px;
  // margin-bottom: 24px;
  display: flex;
  margin-bottom: 15px;
}

.btn_container {
  width: 180px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: #0f0f0f;
  position: relative;
  cursor: pointer;
  // padding-bottom: 5px;
  border-radius: 12px;

  &_text {
    display: flex;
    flex-direction: row;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 40px;
    margin-left: 12px;
    white-space: nowrap;
  }

  i {
    font-size: 20px;
  }

  .line {
    position: absolute;
    left: 4%;
    bottom: -1px;
    right: 0;
    width: 92%;
    height: 2px;
    background-color: #005fff;
  }

  // &::after{
  //   content:''; // 必须
  //   position: absolute;
  //   left: 3%;
  //   bottom: -1px;
  //   right: 0;
  //   width: 94%;
  //   height: 2PX;
  //   background-color: #005FFF;
  // }
}

.content {
  flex: 1;
  position: relative;
  overflow-y: auto;
}

.empty-content {
  border-radius: 15px;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .tipTitle {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #b9bdc7;
    margin-top: 8px;
  }
}

.flex-row {
  flex-direction: row;
}

.btn_left {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-radius: 15px;
  padding: 10px 23px;
}

.workBench-button-box {
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  background-color: white;
  border-radius: 15px;

  .workBench-button {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 0 20px;
  }

  .flex-row-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}

.chooseProject {
  display: flex;
  align-items: center;
}
.bckimg {
  margin-right: 6px;
  width: 24px;
}
.activeBlue {
  border: 1px solid #005fff;
  background-color: #e5efff;
}
.activeYellow {
  border: 1px solid #eea51c;
  background-color: #fef7ea;
}
.activeGreen1 {
  border: 1px solid #02d8a8;
  background-color: #ecfefe;
}

.acitvepurple {
  border: 1px solid #5d50d8;
  background-color: #eeedfb;
}
.activeGreen {
  border: 1px solid #00abd5;
  background-color: #e5f7fb;
}
.activeYellow1 {
  border: 1px solid #eda51d;
  background-color: #fdf6e8;
}

.gzt-btn-text {
  line-height: 24px;
}
</style>
